<template>
    <div ref="mapContainer" style="width: 100%; height: 100%;"></div>
  </template>
  
  <script setup lang="ts">
  import { ref, onMounted, onUnmounted } from 'vue';
  import * as echarts from 'echarts';
  import { projectLocations } from '@/api/workorder/projectInfo/mockData';
  import Cookies from 'js-cookie';
  import { useRouter } from 'vue-router';
  
  const mapContainer = ref<HTMLElement | null>(null);
  const chart = ref<echarts.ECharts | null>(null);
  const router = useRouter();
  
  // 初始化地图
  const initMap = () => {
    if (!mapContainer.value) return;
    
    chart.value = echarts.init(mapContainer.value);
    
    const option = {
      backgroundColor: 'transparent',
      geo: {
        map: 'hebei',
        roam: true,
        zoom: 1.2,
        center: [116.481499, 39.990475],
        itemStyle: {
          areaColor: '#323c48',
          borderColor: '#111'
        },
        emphasis: {
          itemStyle: {
            areaColor: '#2a333d'
          }
        }
      },
      series: [
        {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: projectLocations.map(item => ({
            name: item.name,
            value: [item.longitude, item.latitude, item.description],
            itemStyle: {
              color: item.type === '商业' ? '#ff0' : '#0ff'
            }
          })),
          symbolSize: 12,
          rippleEffect: {
            brushType: 'stroke'
          },
          label: {
            normal: {
              show: true,
              position: 'right',
              formatter: '{b}',
              textStyle: {
                color: '#fff'
              }
            }
          },
          emphasis: {
            label: {
              show: true
            }
          }
        }
      ],
      tooltip: {
        trigger: 'item',
        formatter: function(params: any) {
          const project = projectLocations.find(p => p.name === params.name);
          if (!project) return '';
          return `
            <div style="padding: 10px;">
              <h4 style="margin: 0 0 10px 0;">${project.name}</h4>
              <p style="margin: 5px 0;">${project.description}</p>
              <p style="margin: 5px 0;">状态：${project.status}</p>
              <p style="margin: 5px 0;">类型：${project.type}</p>
            </div>
          `;
        }
      }
    };
  
    chart.value.setOption(option);
    
    // 添加点击事件
    chart.value.on('click', (params) => {
      const project = projectLocations.find(p => p.name === params.name);
      if (project) {
        Cookies.set('projectId', project.id);
        Cookies.set('projectName', project.name);
        Cookies.set('displayType', 'workorder');
        router.push('/projectInfoPage');
      }
    });
  };
  
  // 监听窗口大小变化
  const handleResize = () => {
    chart.value?.resize();
  };
  
  onMounted(() => {
    initMap();
    window.addEventListener('resize', handleResize);
  });
  
  onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
    chart.value?.dispose();
  });
  </script>
  
  <style scoped>
  </style>